$(function(){
  let pageNum = 1; // 页码数
  let isFinished = false; 
  let isLoading = false;
  // 包装函数用来渲染
  function getfoodlist(){
    isLoading  = true
    $('.list-box').html('<p class="more" id="loading">数据正在加载中...</p>')
    const url = 'http://124.223.14.236:3001/api/recipe'
    axios({
      method:'GET',
      url:url,
      params:{
        pageSize:12,
        pageNum
      }
    }).then(function(res){
      const list = res.data.data.list
      if(list.length===0){
        isFinished = true
        $('.list-box').html('<p class="noinfo" >没有数据了...</p>')
      }else{
        pageNum++;
        // 函数渲染
        rander(list)
      }
    })
  }
  // 调用
  getfoodlist()
// 渲染函数
function rander(list){
 const liststr =  list.map(({img,name,id},index) =>{
    const reimg = `http://124.223.14.236:3001/public/${img}`
    return`
    <li>
            <a href="../recipeBaseCode/info.html?id=${id}">
              <img src=${reimg} alt="" />
              <h3 title="${name}">${name}</h3>
            </a>
          </li>`
  }).join('')
  $('.list-box ').html(liststr)
}

})

